<template>
  <!-- <div :style="{backgroundColor:'#999',minHeight:clientHeight+'px'}"> -->
  <div>
    <div class="bgc"></div>
    <!-- 头部导航条 -->
    <header class="header">
      <router-link tag="div" to="/index">
        <van-icon size="26" color="red" name="wap-home-o" />
      </router-link>
      <div>
        <div class="title">{{songInfo.title}}</div>
        <div class="author">{{songInfo.author}}</div>
      </div>
      <van-icon size="26" name="search" />
    </header>
    <!-- 封面图片 -->
    <div class="cover-container">
      <img :src="songInfo.pic_radio" alt />
    </div>
    <!-- 歌曲区域 -->
    <LRC @changeTime="changeTime" :songId="$route.params.songId"></LRC>
    <!-- 操作区 -->
    <div class="play-action">
      <van-icon v-show="!isLike" size="26" name="like-o" @click="setLike(true)" />
      <van-icon v-show="isLike" size="26" color="red" name="like" @click="setLike(false)" />
      <van-icon size="26" name="down" />
    </div>
    <!-- 音乐播放组件 -->
    <div class="audio-container">
      <!-- 怎么在vue中获取dom元素呢 document.getElementById -->
      <audio ref="audio" :src="bitrate.show_link" controls></audio>
    </div>
    <!-- <button @click="getTime">获取事件</button> -->
  </div>
</template>

<script>
import { getMusicInfo } from "@api/music-api";
import { SET_MUSIC_INFO, CHANGE_CURRENTTIME } from "../constant/vuex-mutation";
import { mapState } from "vuex";
import LRC from "@components/LRC.vue";

import { Dialog } from "vant";

export default {
  // 通过歌曲id加载音乐的信息
  created() {
    getMusicInfo(this.$route.params.songId).then(res => {
      this.$store.commit(SET_MUSIC_INFO, {
        songInfo: res.songinfo,
        bitrate: res.bitrate
      });
      //
      this.$refs.audio.addEventListener("timeupdate", this.currentTimeChange);
    });
    this.clientHeight = window.innerHeight;
  },
  data() {
    return {
      clientHeight: 0,
      isLike: false
    };
  },
  components: {
    LRC
  },
  methods: {
    changeTime(time) {
      this.$refs.audio.currentTime = time;
    },
    getTime() {
      // audio标签是有一个监听器的，timeupdate
      this.$refs.audio.addEventListener("timeupdate", () => {
        console.log(this.$refs.audio.currentTime);
      });
    },
    currentTimeChange() {
      this.$store.commit(CHANGE_CURRENTTIME, {
        currentTime: this.$refs.audio.currentTime
      });
    },
    setLike(flag) {
      if (flag) {
        // 调用接口
        setTimeout(() => {
          this.$notify({
            type: "success",
            message: "收藏成功"
          });
          this.$toast("收藏成功");
          this.isLike = true;
        }, 500);
      } else {
        this.$dialog
          // Dialog
          .alert({
            message: "确认要取消收藏吗？",
            showCancelButton: true,
            confirmButtonColor: "red"
            // function函数的this指向函数调用地方的this， 箭头函数指向的声明时候的this
            // beforeClose: (action, done) => {
            //   if (action === "confirm") {
            //     setTimeout(() => {
            //       this.isLike = false;
            //       done();
            //     });
            //   } else {
            //     done();
            //   }
            // }
          })
          .then(res => {
            // 点击了确认的时候
            this.isLike = false;
          })
          .catch(() => {
            // 取消之后
          });
      }
    }
  },
  computed: {
    ...mapState({
      songInfo: "songInfo",
      bitrate: "bitrate",
      process: "process"
    })
  },
  watch: {
    process() {
      this.$refs.audio.currentTime = this.process;
    }
  },
  beforeDestroy() {
    this.$refs.audio.removeEventListener("timeupdate", this.currentTimeChange);
  }
};
</script>

<style lang="less" scoped>
//头部
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  text-align: center;
  .title {
    font-size: 18px;
  }
  .author {
    font-size: 14px;
    color: #999;
  }
}
.bgc {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #ebedf0;
  z-index: -1;
}
// 封面图片区域
.cover-container {
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    height: 200px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #c8c9cc;
  }
}
// 操作区
.play-action {
  display: flex;

  // 设置主轴对齐方式
  justify-content: space-between;
  padding: 10px;
}

.audio-container {
  text-align: center;
}
</style>